<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link type="text/css" rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/components/image/cropper.css">
    <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/ImgCropping.css">
    <!-- 页面标题 -->
    <title>数控开发 · 代码片段编辑器</title>

    <!-- 桌面端浏览器及收藏夹图标 -->
    <link rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">

    <link href="https://cdn.staticfile.org/codemirror/5.52.2/codemirror.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/codemirror/5.52.2/addon/hint/show-hint.min.css" rel="stylesheet">

</head>

<body>
    <div id="test" style="width: 100%;position: absolute;"></div>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: block;">
        <!-- body start -->

        <div id="_dc_inputor_" class="layui-form" lay-filter="_dc_inputor_" style="width: 100%;height: 100%;"></div>

        <div id="_show_dc_inputor_" style="position: absolute;
        top: 0;
        right: 30%;"></div>

        <!-- body end -->
    </div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- oauth_mode start -->
<!-- 不授权模式，仅初始化常用变量及函数 -->
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass" authorize_mode="none" console_mode="">
</script>
<!-- oauth_mode end -->

<!-- 基础样式库及基于layui的ui类 -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    console.log(11)
</script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/uiClass.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/imageClass.js"></script>
<script src="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.js"></script>
<!-- js file start -->

<!-- 移动端禁止横屏 -->
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/reject_lanscape.js"></script>

<script>
    site_config = {
        api_host: "https://www.dcdev.net/",

    }
    // 屏幕大小变动时的处理（如在textarea失焦时的处理）
    {
        if (browser_info.is_mobile) {
            $("#_dcdev_body_container").css('height', parseInt($("body").css("height").replace("px", "")) - 40 + "px")
            $("#_dcdev_body_container").css('padding', '0px')
        }
        //监听手机屏幕翻转
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", resize_form, false);

        function resize_form() {
            setTimeout(function () {
                window.scrollTo(0, 0);
                $("#dc_footer").css("bottom", '0px !important');
                foot_top = (parseInt($("#dc_footer").css("top")) - 15);
                $("#preview_page_frame").css("width", "100% !important");
                $("#preview_page_frame").css("height", foot_top + "px !important")

                if (browser_info.is_mobile) {
                    $("#_dcdev_body_container").css('height', parseInt($("body").css("height").replace("px",
                        "")) -
                        40 + "px")
                    $("#_dcdev_body_container").css('width', "100%")
                }
            }, 200);
        }
    }

    $("#_dc_inputor_").load("render_inputor.html", "",
        function () {
            data = {
                // 容器div的id
                id: "_dc_inputor_",
                // x表示横向滚动、y表示竖向滚动
                direction: "y",
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "margin-left: 10px;clear:both;",
                },
                //是否需要按钮
                btn: '修改',
                // 每个li的配置
                li_config: {
                    // td 的函数配置
                    li_function: [],
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_html: `   
<div>
    <img data-key=image src="#{type}" style="width:40px;height:40px;">
    <div data-key=title style="font-size:12px;color:gray;">#{min}</div>
</div>
    `,
                    li_style: "margin-top:10px;margin-bottom:10px ;"
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {
                        console.log(res);
                    },
                    click_btn: function (res) {
                        console.log(res);
                    },
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {
                        // console.log(res);
                    },
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {
                        // console.log(res);
                    },
                    // 所有数据加载完毕的回调
                    no_more: function (res) {
                        // console.log(res);
                    },
                },
                // 请求及分页的配置
                data_config: {
                    data: [
                        {
                            type: "color",
                            title: "颜色1",
                            column_name: "color1",
                            is_require: false,
                            default_value: "#ddd",
                            color_type:["#1296db", "gray", "#93ab32"]

                        }, {
                            type: "text",
                            title: "文本型244",
                            column_name: "title",
                            is_require: true,
                            default_value: "",
                            is_multi_line: true,
                            place_holder: "占位符",
                            max_value: 50,
                            min_value: 5,
                            hidden: true
                        },
                        {
                            type: "html",
                            html: `<hr style="width:600px;"><button>abcdeflkjweriou</button>`,
                        },
                        {
                            type: "text",
                            title: "文本型22",
                            column_name: "title1",
                            is_require: false,
                            default_value: "默认值",
                            is_multi_line: false,
                            place_holder: "占位符",
                            max_value: 20,
                            min_value: 2,
                        },
                        {
                            type: "date",
                            title: "日期型",
                            column_name: "date",
                            is_require: true,
                            default_value: "",
                            place_holder: "占位符",
                            start_date_value: '2002-01-01',
                            end_date_value: '2020-06-07',
                        }, {
                            type: "number",
                            title: "数值型",
                            column_name: "number",
                            is_require: true,
                            default_value: 5,
                            num_type: "整型",
                            unit: "个",
                            max_value: 20,
                            min_value: 2,
                        }, {
                            type: "bool",
                            title: "开关型",
                            column_name: "bool",
                            is_require: false,
                            default_value: true,
                            tvalue: true,
                            fvalue: false,
                            ttitle: "是",
                            ftitle: "否",
                        }, {
                            type: "option",
                            title: "单选型",
                            column_name: "option",
                            is_require: false,
                            default_value: '选项2',
                            options: ['选项1', '选项2', '选项3',],
                            options_title: ['选项1', '选项2', '选项3',]
                        }, {
                            type: "checkbox",
                            title: "多选型",
                            column_name: "checkbox",
                            is_require: false,
                            default_value: '选项1',
                            options: ['选项1', '选项2', '选项3',],
                            options_title: ['选项1', '选项2', '选项3',]
                        }, {
                            type: "image",
                            title: "图片型",
                            column_name: "checkbox",
                            is_require: false,
                            default_value: '选项1',
                        }
                    ],
                },
            };
            new render_inputor().render(data, null, null)
        });
</script>

</html>